  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html lang="en">
<head>
	<meta charset="UTF-8">
	<title>产品详情</title>
	<meta name="keywords" content=""> 
	<meta name="description" content="">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="renderer" content="webkit" />
	<meta name="viewport" content="width=1000,initial-scale=1,maximum-scale=1,user-scalable=yes">

	<link rel="Shortcut Icon" href="../static/favicon.ico">
	<!-- Standard iPad -->  
	<link rel="apple-touch-icon" type="image/x-icon" sizes="72x72" href="../static/touch-icon-ipad-144.png" />  
	<!-- Retina iPad -->  
	<link rel="apple-touch-icon" type="image/x-icon" sizes="144x144" href="../static/touch-icon-ipad-144.png" /> 
	<link rel="stylesheet" href="../static/css/main.css">
    <link rel="stylesheet" href="../static/css/product_information.css">
	<!--[if lt IE 9]>
	<script src="../static/js/html5.js"></script>
	<![endif]-->
</head>
 <body>   
	 <!-- 产品详情样式 -->
	 <div class="content">
	 	<div id="product" class="layout clearfix">
	 		<div class="product_picture fn-fl">
	 			<div id="vertical" class="bigImg">

	 				<img src="../temp/X1.png" alt="" id="midimg" />

	 				<div style="display:none;" id="winSelector"></div>

	 			</div>
	 			<div class="smallImg">

	 				<i class="scrollbutton smallImgUp disabled">
	 				</i>

	 				<div id="imageMenu">

	 					<ul>
	 						<li class="active" id="onlickImg"><img src="../temp/X1.png"/ ></li>
	 					</ul>

	 				</div>

	 				<i class="scrollbutton smallImgDown"></i>

	 			</div><!--smallImg end-->	
	 			<div id="bigView" style="display:none;"><img width="700" height="700" alt="" src="" /></div>
	 			<div id="share" class="clearfix">
	 				<span class="fn-fl">分享到</span>
	 				<a title="分享到微信" class="bshare-weixin" href=""></a>
	 				<a title="分享到QQ" class="bshare-qzone" href=""></a>
	 				<a title="分享到新浪微博" class="bshare-sinaminiblog" href=""></a>
	 				<a title="分享到人人网" class="bshare-renren"></a>
	 				<a title="分享到QQ空间" class="bshare-douban" href=""></a> 
	 			</div>
	 		</div>
	 		<ul class="product_contain fn-fl">
	 			<li class="product_title">
	 				<span class="title fn_text_overflow">蓝色骨头-中国  崔健滚动三十纪念棒球帽</span>
	 				<span class="describe fn_text_overflow">拥有一顶摇滚力量的帽子</span>
	 				<span class="point">
	 					<span class="bonus">300积分</span>
	 					<span class="price">￥88.00</span>
	 				</span>
	 			</li>
	 			<li class="container_list">
	 				<div class="color_type clearfix">
	 					<span class="type_color">颜色颜色颜色颜</span>
	 					<p class="type_list">
	 						<span class="type_item active">黑色黑色色黑色黑色</span>
	 						<span class="type_item active">黑色黑色色黑色黑色色</span>
	 						<span class="type_item active">黑色黑色色黑色黑色色</span>
	 						<span class="type_item active">黑色 iPhone 6s Plus</span>
	 						<span class="type_item">橙色</span>
	 						<span class="type_item active">黑色</span>
	 						<span class="type_item">红色</span>
	 						<span class="type_item">橙色</span>
	 						<span class="type_item active">黑色</span>
	 						<span class="type_item">红色</span>
	 						<span class="type_item">橙色</span>
	 						<span class="type_item active">黑色</span>
	 						<span class="type_item">红色</span>
	 						<span class="type_item">橙色</span>
	 						<span class="type_item active">黑色</span>
	 						<span class="type_item">红色</span>
	 						<span class="type_item">橙色</span>
	 					</p>
	 				</div>
	 				<div class="exchange">
	 					<span>兑换数量</span>
	 					<div id="calculation">
	 						<span class="reduce">-</span>
	 						<!-- data-stock为库存量 -->
	 						<input class="calculation_input" value="1" data-stock="8">
	 						<span class="add">+</span>
	 					</div>
	 					<span>剩余<span class="stock">8</span>件</span>
	 				</div>
	 				<div class="describe">已选择“<span class="color">黑色</span>”“<span class="choice_num">1</span>件”</div>
	 			</li>
	 			<li class="product">
	 				<input  type="button"  value="立即兑换" onclick="sumbit();" class="btn_status_false fn-fl">
	 				<a href="#" class="collection fn-fr fn-tr"><i></i><span>收藏</span></a>
	 			</li>
	 			<li class="product_tip">
	 				<p>
	 					<span>原厂正品保障（全国联保 大陆发货）</span>
	 					<span class="ml20">全场包邮（虚拟商品除外）</span>
	 				</p>
	 				<p class="mt20">
	 					<span>七天无理由退货（不影响二次销售）</span>
	 				</p>
	 			</li>
	 		</ul>
	 	</div>
	 	
	 	<div id="product_information">
	 		<div class="product_details">
	 			<span>商品详情</span>
	 		</div>
	 		<div class="details_list"></div>
	 	</div>
	 </div> 

<script type="text/javascript" src="../static/js/jquery.min.js"></script>
<!-- <script src="../static/js/modernizr-custom-v2.7.1.min.js"></script> -->
<!-- <script src="../static/js/common.js"></script> -->
<script src="../static/js/banner_list.js"></script>
<script> 
$(document).ready(function(){
	
		// 选择商品颜色
		$('.type_item').click(function(){
			$(this).addClass('active').siblings().removeClass('active');
			$('.describe').find('.color').text($('.type_item.active').text())
			return false;
		})
		// 收藏点击变颜色
		$('.collection').click(function(){
			if($('.collection').hasClass('active')){
				$(this).removeClass('active');
				return false
			}else{
				$(this).addClass('active')
					return false;
			}
			
		});
		$('#imageMenu').find('li').click(function(){
			$(this).addClass('active').siblings().removeClass('active')
			return false
		})
	})	

</script>
 </body>
 </html>